<template>
  <!-- <div id="cesiumContainer" class="cesium-container">
  </div> -->
  <el-row gutter="5">
    <el-col :span="23">
      <!-- <div id="cesiumContainer" class="grid-content ep-bg-purple cesium-container" /> -->
      <div class="cesium-container grid-content ep-bg-purple">
        <!-- Cesium Container -->
        <div id="cesiumContainer" class=" cesium-container"></div>
        <!-- 识别信息弹窗 Popup Container -->
        <div id="popupContainer" style="display: none;">
            <span id="closePopup" class="close-btn" @click="hidePopup">×</span>
            <div id="popupContent"></div>
        </div>
        <!-- Toolbar for controls -->
        <div id="toolbar">
          <el-button type="primary" plain @click="showLayer('layer01')">
            <img src="../assets/01.png" alt="Layer 1" />
          </el-button>
          <el-button type="primary" plain @click="showLayer('layer02')">
            <img src="../assets/02.png" alt="Layer 1" />
          </el-button>
        </div>
      </div>
    </el-col>
    <el-col :span="1">
      <!-- <div class="grid-content ep-bg-purple-light" /> -->
      <!-- <el-button type="primary" size="small" plain>切换图层</el-button> -->
      <el-button type="primary" plain @click="flyToLocation">flyTo</el-button>
      <el-button type="primary" plain @click="togglePointDrawing">{{ isPointDrawing  ? '停止绘制' : '绘制点' }}</el-button>
      <el-button type="primary" plain @click="toggleLineDrawing">{{ isLineDrawing ? '停止绘制' : '绘制线' }}</el-button>
      <el-button type="primary" plain @click="togglePolygonDrawing">{{ isPolygonDrawing ? '停止绘制' : '绘制面' }}</el-button>
      <el-button type="primary" plain @click="toggleIdengtify">{{ isIdengtify ? '停止识别' : '识别' }}</el-button>
      <el-button type="primary" plain @click="toggleMeasurement">{{ isMeasuring ? '停止测量' : '测距' }}</el-button>
      <el-button type="primary" plain @click="toggleAreaMeasurement">{{ isAreaMeasuring ? '停止测量' : '测面积' }}</el-button>
      <el-button type="primary" plain @click="loadGeoJson">加载GeoJSON</el-button>
      <el-button type="primary" plain @click="loadWkt">加载WKT</el-button>
    </el-col>
    <div v-show="showMeasureTooltip" 
        :style="measureTooltipStyle" 
        class="measure-tooltip">
      {{ currentDistance }}
    </div>
  </el-row>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import * as Cesium from 'cesium';
  import MeasureManager from '@/utils/MeasureManager';
  import wellknown from 'wellknown'; 
  Cesium.Ion.defaultAccessToken = 
      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlOThlYzRkMC0zN2IwLTRkYzEtODU5Ny04YzI4NDYxMjRlYWYiLCJpZCI6MjY3MDk4LCJpYXQiOjE3MzYxNjkzMzd9.W0Lf2lL41lUoJ5B0n9vf43NlVUtDAAxdKaI692PlfpI';
  // 设置Cesium基础URL
  window.CESIUM_BASE_URL = "/"
  // 设置cesium默认视角
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(113.0, 34.0, 114.0, 35.0);
  const webKey = 'be00a78d292b7d2062942e07e46c67cf'
  const tdtVecBasicLayer = new Cesium.WebMapTileServiceImageryProvider({
      // 天地图矢量地图服务的URL，包含获取瓦片所需的参数
      url:
        'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' +
        webKey,
      // 矢量地图的基础图层名称
      layer: 'tdtVecBasicLayer',
      // 地图样式设置为默认
      style: 'default',
      // 瓦片图片格式设置为JPEG
      format: 'image/jpeg',
      // 使用的瓦片矩阵集合ID，确保与Google Maps兼容
      tileMatrixSetID: 'GoogleMapsCompatible',
      // 初始状态下不显示该图层
      show: false,
      })
  const tdtAnnoLayer = new Cesium.WebMapTileServiceImageryProvider({
			url:
				'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' +
				webKey,
			layer: 'tdtAnnoLayer',
			style: 'default',
			format: 'image/jpeg',
			tileMatrixSetID: 'GoogleMapsCompatible',
			show: false,
		})
  let layer01, layer02;
  let viewer;

  // 定义绘制事件的响应式变量
  // 定义响应式变量
  const isPointDrawing = ref(false);
  const isLineDrawing = ref(false);
  const isPolygonDrawing = ref(false);
  let handler = null;
  let currentLinePositions = [];
  let currentPolygonPositions = [];
  let currentPolylineEntity = null;
  let currentPolygonEntity = null;
  let realTimePolylineEntity = null; // 新增变量用于存储实时连线实体
  let realTimePolygonEntity = null; // 新增变量用于存储实时多边形实体
  const isIdengtify = ref(false);
  // 定义测距相关的响应式变量
  const isMeasuring = ref(false);
  let totalDistance = 0;
  const showMeasureTooltip = ref(false);
  const measureTooltipStyle = ref({
    left: '0px',
    top: '0px'
  });
  const currentDistance = ref('0.00 米');
  // 定义测面积相关的响应式变量
  const isAreaMeasuring = ref(false);
  let totalArea = 0;
  onMounted(() => {
    viewer = new Cesium.Viewer("cesiumContainer", {
      navigationHelpButton: false,
      infoBox:false,
      selectionIndicator:false,

    });
      //矢量底图
    layer01 = viewer.imageryLayers.addImageryProvider(tdtVecBasicLayer)
    layer02 = viewer.imageryLayers.addImageryProvider(tdtAnnoLayer)
    layer01.show = false
    layer02.show = false
    // // 创建entity
    // const entity = viewer.entities.add({
    //   position: Cesium.Cartesian3.fromDegrees(112.0, 34.0),
    //   box: {
    //     dimensions: new Cesium.Cartesian3(500000.0, 500000.0, 500000.0),
    //     material: Cesium.Color.RED.withAlpha(0.5),
    //     outline: true,
    //     outlineColor: Cesium.Color.BLACK,
    //   },
    //   properties: {
    //     name: "red box",
    //     description: "This is a red box.",
    //   },
    // })
    // 绘制事件
    // 创建一个新的ScreenSpaceEventHandler实例，用于处理屏幕空间事件
    // 参数 viewer.canvas 是画布元素，事件处理将基于此画布上的交互
    handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    // 添加鼠标右键点击事件监听器以移除之前的监听器
    handler.setInputAction(stopDrawing, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

    // 设置左键点击事件监听器
    // 为handler对象的左键点击事件设置输入操作
    // 参数1: handleLeftClick - 当左键点击事件发生时执行的回调函数
    // 参数2: Cesium.ScreenSpaceEventType.LEFT_CLICK - 指定监听的事件类型为左键点击
    handler.setInputAction(handleLeftClick, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    // 添加鼠标移动事件监听器
    // handler.setInputAction(handleMouseMove, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

  });

// 图层切换，显示指定图层
  const showLayer = (layerName) => {
    if (layerName === 'layer01') {
      console.log('layer01')
      layer01.show = true;
      layer02.show = false;

    } else if (layerName === 'layer02') {
      console.log('layer02')
      layer01.show = false;
      layer02.show = true;
      // viewer.imageryLayers.remove(tdtVecBasicLayer)
      // viewer.imageryLayers.addImageryProvider(tdtAnnoLayer)
    }
  };
// 飞行到指定位置
  const flyToLocation = () => {
      const destination = Cesium.Cartesian3.fromDegrees(
        116.408109, // 经度 (Longitude)
        39.907182,  // 纬度 (Latitude)
          400000.0    // 高度 (Height) in meters
      );

      const heading = Cesium.Math.toRadians(0);
      const pitch = Cesium.Math.toRadians(-90);
      const roll = 0;

      viewer.camera.flyTo({
        destination: destination,
        orientation: {
          heading: heading,
          pitch: pitch,
          roll: roll
        },
        duration: 3,
        complete: function() {
          console.log('飞行完成');
        }
      });
  };

// 定义方法
const handleLeftClick = (click) => {
  /**
   * 从场景中选择点击位置处的对象。
   *
   * 该函数用于在三维场景中根据鼠标点击的位置，挑选出位于该位置的图形对象。
   * 这个功能通常用于实现用户与三维场景中的对象进行交互，例如点击建筑物、飞机等模型时获取相关信息。
   *
   * @param {Object} click - 包含点击事件信息的对象，其中 `click.position` 是点击位置的屏幕坐标。
   * @returns {Object|null} 返回选中的对象，如果没有选中任何对象则返回 null。
   */
  const pickedObject = viewer.scene.pick(click.position);

  if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id) && isIdengtify.value) {
    const entity = pickedObject.id;

    if (entity instanceof Cesium.Entity) {
      // 如果点击的是实体，则显示实体的属性
      // alert(`Name: ${entity.properties.name}, Description: ${entity.properties.description}, Click Position: ${click.position}`);
      showPopup(pickedObject.id.properties.name, pickedObject.id.properties.description);
    }
  }
  // 没有点击到实体
  // 通过点击位置和地球椭球模型获取三维地球坐标
  const cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
    if (cartesian) {
      if (isPointDrawing.value) {
        // 绘制点
        addPoint(cartesian);
      } else if (isLineDrawing.value) {
        // 记录位置以备绘制线段并实时更新显示
        currentLinePositions.push(cartesian);
        updatePolyline();
      } else if (isPolygonDrawing.value) {
        // 记录位置以备绘制多边形并实时更新显示
        currentPolygonPositions.push(cartesian);
        updatePolygon();
      } 
      else if (isMeasuring.value) {
        // 测量距离
        addPoint(cartesian);
        isDistance(cartesian)

        currentLinePositions.push(cartesian);
        updatePolyline();
      }
      else if (isAreaMeasuring.value) {
      // 测面积
      addPoint(cartesian);
      currentPolygonPositions.push(cartesian);
      updatePolygon();
      // calculateArea(cartesian);
  }
    }
};

const stopDrawing = () => {
  isPointDrawing.value = false;
  isLineDrawing.value = false;
  isPolygonDrawing.value = false;
  isMeasuring.value = false;
  showMeasureTooltip.value = false;
  isAreaMeasuring.value = false;
  

  handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  console.log('Drawing stopped by right-click.');

  if (currentPolylineEntity) {
    // 将当前的 polyline 转换为静态实体
    currentPolylineEntity.polyline.positions = new Cesium.ConstantProperty(currentPolylineEntity.polyline.positions.getValue());
    currentPolylineEntity = null; // 结束绘制后重置 polyline 实体引用
  }

  if (currentPolygonEntity && currentPolygonPositions.length > 2) {
    // 将当前的 polygon 转换为静态实体
    currentPolygonEntity.polygon.hierarchy = new Cesium.ConstantProperty(currentPolygonEntity.polygon.hierarchy.getValue());
    currentPolygonEntity = null; // 结束绘制后重置 polygon 实体引用
  }

  // 清理实时连线
  if (realTimePolylineEntity) {
    viewer.entities.remove(realTimePolylineEntity);
    realTimePolylineEntity = null;
  }

  // 清理实时多边形
  if (realTimePolygonEntity) {
    viewer.entities.remove(realTimePolygonEntity);
    realTimePolygonEntity = null;
  }
};

const togglePointDrawing = () => {
  // if (isLineDrawing.value || isPolygonDrawing.value) return; // 防止同时激活多种模式
  isPointDrawing.value = !isPointDrawing.value;
  if (isPointDrawing.value) {
    console.log('Start Point Drawing');
  } else {
    console.log('Stop Point Drawing');
  }
};

const toggleLineDrawing = () => {
  // if (isPointDrawing.value || isPolygonDrawing.value) return; // 防止同时激活多种模式
  isLineDrawing.value = !isLineDrawing.value;
  if (isLineDrawing.value) {
    console.log('Start Line Drawing');
    currentLinePositions = []; // 开始新线段时初始化数组
    if (currentPolylineEntity) {
      viewer.entities.remove(currentPolylineEntity);
    }
    currentPolylineEntity = viewer.entities.add({
      polyline: {
        positions: new Cesium.CallbackProperty(() => currentLinePositions, false),
        width: 5,
        material: Cesium.Color.BLUE
      }
    });
    // 注册鼠标移动事件
    handler.setInputAction(movement => {
      const cartesian = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
      if (cartesian) {
        // 更新实时连线的位置
        if (realTimePolylineEntity) {
          viewer.entities.remove(realTimePolylineEntity);
        }
        realTimePolylineEntity = viewer.entities.add({
          polyline: {
            positions: new Cesium.CallbackProperty(() => [...currentLinePositions, cartesian], false),
            width: 5,
            material: Cesium.Color.BLUE
          }
        });
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  } else {
    console.log('Stop Line Drawing');
    stopDrawing();
  }
};
const togglePolygonDrawing = () => {
  // if (isPointDrawing.value || isLineDrawing.value) return; // 防止同时激活多种模式
  isPolygonDrawing.value = !isPolygonDrawing.value;
  if (isPolygonDrawing.value) {
    console.log('Start Polygon Drawing');
    currentPolygonPositions = []; // 开始新多边形时初始化数组
    if (currentPolygonEntity) {
      viewer.entities.remove(currentPolygonEntity);
    }
    currentPolygonEntity = viewer.entities.add({
      polygon: {
        hierarchy: new Cesium.CallbackProperty(() => new Cesium.PolygonHierarchy(currentPolygonPositions), false),
        material: Cesium.Color.GREEN.withAlpha(0.5)
      }
    });
    handler.setInputAction(movement => {
      const cartesian = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
      if (cartesian) {
        // 更新实时多边形的位置
        if (realTimePolygonEntity) {
          viewer.entities.remove(realTimePolygonEntity);
        }
        realTimePolygonEntity = viewer.entities.add({
          polygon: {
            hierarchy: new Cesium.CallbackProperty(() => new Cesium.PolygonHierarchy([...currentPolygonPositions, cartesian]), false),
            material: Cesium.Color.BLUE.withAlpha(0.5)
          }
        });
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  } else {
    console.log('Stop Polygon Drawing');
    stopDrawing();
  }
};
const toggleIdengtify = () => {
  isIdengtify.value = !isIdengtify.value;
  if (isIdengtify.value) {
    console.log('Start Idengtify');
  } else {
    console.log('Stop Idengtify');
  }
};
// // 测距函数
const toggleMeasurement = () => {
  isMeasuring.value = !isMeasuring.value;
  console.log('Start Measuring');
  currentLinePositions = []; // 开始新线段时初始化数组
  if (currentPolylineEntity) {
    viewer.entities.remove(currentPolylineEntity);
  }
  currentPolylineEntity = viewer.entities.add({
    polyline: {
      positions: new Cesium.CallbackProperty(() => currentLinePositions, false),
      width: 5,
      material: Cesium.Color.RED
    }
  });
  // 显示测距提示框
  showMeasureTooltip.value = true;
  // 启用光标变化以提供用户交互反馈
  viewer.scene.globe.enableCursorChange = true;

  // 注册鼠标移动事件处理程序，用于动态显示测量信息
  handler.setInputAction((movement) => {
    // 在当前鼠标位置拾取地球表面的三维坐标
    const cartesian = viewer.scene.pickPosition(movement.endPosition);
    // const cartesian = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);

    // 当前位置有效且已有测量起点时，计算并更新测量距离
    if (cartesian && currentLinePositions.length > 0) {
      // 计算最近两个测量点之间的距离
      const distance = Cesium.Cartesian3.distance(currentLinePositions[currentLinePositions.length - 1], cartesian);
      // 更新总距离值，单位转换为千米并保留两位小数
      // currentDistance.value = `总长共${(distance / 1000).toFixed(2)} 千米`;
      currentDistance.value = `总长共${((totalDistance+ distance) / 1000).toFixed(2)} 千米`;
      
      // 更新提示框位置，使其跟随鼠标移动
      measureTooltipStyle.value = {
        left: `${movement.endPosition.x + 10}px`,
        top: `${movement.endPosition.y - 10}px`
      };
      // 更新连线
      // 更新实时连线的位置
      if (realTimePolylineEntity) {
            viewer.entities.remove(realTimePolylineEntity);
          }
      realTimePolylineEntity = viewer.entities.add({
        polyline: {
          positions: new Cesium.CallbackProperty(() => [...currentLinePositions, cartesian], false),
          width: 5,
          material: Cesium.Color.RED
        }
      });
    }    
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}
const isDistance = (position) => { 
    if (currentLinePositions.length > 0) {
      const lastPoint = currentLinePositions[currentLinePositions.length - 1];
      const distance = Cesium.Cartesian3.distance(lastPoint, position);
      // const distance = Cesium.Cartesian3.distance(currentLinePositions[currentLinePositions.length - 1], cartesian);
      console.log(`Distance from last point: ${(distance / 1000).toFixed(2)}`);
      totalDistance += distance;
      console.log(`Total Distance: ${(totalDistance / 1000).toFixed(2)}`);
      addDistanceLabel(position,`总长: ${(totalDistance / 1000).toFixed(2)}km`)
    }
    else{
      addDistanceLabel(position,`起点`)
    }
};
// 测量面积

const toggleAreaMeasurement = () => {
  isAreaMeasuring.value = !isAreaMeasuring.value;
    console.log('Start Area Measurement');
    currentPolygonPositions = []; // 开始新多边形时初始化数组
    if (currentPolygonEntity) {
      viewer.entities.remove(currentPolygonEntity);
    }
    currentPolygonEntity = viewer.entities.add({
      polygon: {
        hierarchy: new Cesium.CallbackProperty(() => new Cesium.PolygonHierarchy(currentPolygonPositions), false),
        material: Cesium.Color.YELLOW.withAlpha(0.5)
      }
    });
    handler.setInputAction(movement => {
      const cartesian = viewer.scene.pickPosition(movement.endPosition);
      if (cartesian && currentPolygonPositions.length > 2) {
        // 更新实时多边形的位置
        if (realTimePolygonEntity) {
          viewer.entities.remove(realTimePolygonEntity);
        }
        realTimePolygonEntity = viewer.entities.add({
          polygon: {
            hierarchy: new Cesium.CallbackProperty(() => new Cesium.PolygonHierarchy([...currentPolygonPositions, cartesian]), false),
            material: Cesium.Color.BLUE.withAlpha(0.5)
          }
        });
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
};

// const calculateArea = () => {
//   if (currentPolygonPositions.length > 2) {
//     const polygon = new Cesium.PolygonHierarchy(currentPolygonPositions);
//     const polygonGeometry = new Cesium.PolygonGeometry({
//         polygonHierarchy: polygon,
//         height: 0.0, // 可选参数，多边形的高度
//         extrudedHeight: 0.0, // 可选参数，多边形的拉伸高度
//         vertexFormat: Cesium.VertexFormat.DEFAULT // 可选参数，顶点格式
//     });
//     const polyGeometry = Cesium.PolygonGeometry.createGeometry(polygonGeometry);
//     const area = Cesium.Geometry.computeEnclosedArea(polygonGeometry._geometry);
//     console.log(`Total Area: ${(area / 1000000).toFixed(2)} 公顷`);
//     addAreaLabel(currentPolygonPositions[currentPolygonPositions.length - 1], `面积: ${(area / 1000000).toFixed(2)} 公顷`);
//   }
// };
// 加载geojson
const loadGeoJson = () => {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = '.geojson';
  input.onchange = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const geojsonData = JSON.parse(e.target.result);
        loadGeoJsonData(geojsonData);
      };
      reader.readAsText(file);
    }
  };
  input.click();
};

const loadGeoJsonData = (geojsonData) => {
  viewer.dataSources.add(Cesium.GeoJsonDataSource.load(geojsonData)).then((dataSource) => {
    viewer.zoomTo(dataSource);
  }).catch((error) => {
    console.error('Error loading GeoJSON data:', error);
  });
};

// 新增方法：加载WKT文件
const loadWkt = () => {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = '.wkt';
  input.onchange = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const wktData = e.target.result;
        const geojsonData = parseWktToGeoJson(wktData);
        loadGeoJsonData(geojsonData);
      };
      reader.readAsText(file);
    }
  };
  input.click();
};

// 新增方法：将WKT转换为GeoJSON
const parseWktToGeoJson = (wktData) => {
  try {
    return wellknown(wktData);
  } catch (error) {
    console.error('Error parsing WKT data:', error);
    return null;
  }
};
// 显示弹窗
const showPopup = (name, description) => {
  const popupContent = document.getElementById('popupContent');
  popupContent.innerHTML = `<strong>Name:</strong> ${name}<br><strong>Description:</strong> ${description}`;
  document.getElementById('popupContainer').style.display = 'block';
};

// 隐藏弹窗
const hidePopup = () => {
  document.getElementById('popupContainer').style.display = 'none';
};
// 辅助函数
const addPoint = (position) => {
  viewer.entities.add({
    position: position,
    point: {
      pixelSize: 10,
      color: Cesium.Color.RED,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2
    }
  });
  viewer.scene.requestRender();
};

const addDistanceLabel = (position, description) => {

  // console.log('label标签位置',position),
  viewer.entities.add({
    position:position,
    label: {
      text: description,
      scale: 0.5,
      fillColor: Cesium.Color.BLACK,
      backgroundColor: Cesium.Color.WHITE.withAlpha(0.8), // 设置背景颜色为红色，并设置透明度
      backgroundPadding: new Cesium.Cartesian2(8, 4), // 设置背景相对于文本的内边距
      showBackground: true,
    },
  });
};

const updatePolyline = () => {
  if (currentPolylineEntity && currentLinePositions.length > 1) {
    // 强制重新渲染场景以反映最新变化
    viewer.scene.requestRender();
  }
};

const updatePolygon = () => {
  if (currentPolygonEntity && currentPolygonPositions.length > 2) {
    // 强制重新渲染场景以反映最新变化
    viewer.scene.requestRender();
  }
};
const addAreaLabel = (position, description) => {
  viewer.entities.add({
    position: position,
    label: {
      text: description,
      scale: 0.5,
      fillColor: Cesium.Color.BLACK,
      backgroundColor: Cesium.Color.WHITE.withAlpha(0.8), // 设置背景颜色为红色，并设置透明度
      backgroundPadding: new Cesium.Cartesian2(8, 4), // 设置背景相对于文本的内边距
      showBackground: true,
    },
  });
};

</script>

<style scoped>
  .cesium-container {
    width: 100%;
    height: 98vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    
  }

  #toolbar {
  display: flex;
  position: fixed;
  bottom: 70px;
  right: 90px;
  z-index: 1000;
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  #toolbar img {
  width: 24px; /* 设置图片宽度 */
  height: 24px; /* 设置图片高度 */
  }
  #popupContainer {
    position: fixed;
    right: 100px;
    top: 10%;
    transform: translateY(-50%);
    background-color: white;
    border: 1px solid #ccc;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* 确保它在其他内容之上 */
}

.close-btn {
    float: right;
    cursor: pointer;
    background-color: #999;
}
.measure-tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  z-index: 999;
}
</style>